<template>
  <div class="register">
   <el-card class="card1">
    <el-form label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="运输任务编号:">
            <el-input v-model="form.transportTaskId" placeholder="请输入运输任务编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="起始地机构:">
            <el-select
            v-model="form.startAgencyName"
            placeholder="请选择起始地机构"
            ref="formref"
            style="width: 100%"
            clearable
            >
              <el-option
              hidden
              :key="treeList.id"
              value="一级菜单"
              :label="form.startAgencyName"
              ></el-option>
              <el-tree
              :expand-on-click-node="false"
              :check-on-click-node="true"
              :data="treeList"
              :props="defaultProps"
              @node-click="handleNodeClick"
              ></el-tree>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地机构:">
            <el-select
            placeholder="请选择目的地机构"
            style="width: 100%"
            clearable
            ref="cityref"
            v-model="form.endAgencyName"
            >
              <el-option
              hidden
              :key="treeList.id"
              value="一级菜单"
              :label="form.endAgencyId"
              ></el-option>
              <el-tree
              :expand-on-click-node="false"
              :check-on-click-node="true"
              :data="treeList"
              :props="defaultProps"
              @node-click="handleNodeClicktwo"
              ></el-tree>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="回车时间:">
            <el-date-picker
            v-model="cartime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy 年 MM 月 dd 日 HH 时:mm 分: ss 秒"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="timeSubmit">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="车辆是否可用:">
              <el-select style="width: 100%" placeholder="请选择" v-model="form.isAvailable">
                <el-option
                v-for="item in option"
               :key="item.value"
               :label="item.value"
               :value="item.id">
               </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 50px">
            <el-button  class="btn1" @click="getCarList">搜索</el-button>
            <el-button  class="btn2" @click="reset">重置</el-button>
          </el-col>
      </el-row>
    </el-form>
   </el-card>
   <el-card style="margin-top: 20px">
      <el-table :row-style="{fontSize:'13px'}" v-loading="loading" :data="tableData"
                :header-cell-style="{background:'#f8faff'}" stripe>
        <el-table-column label="运输任务编号" prop="transportTaskId"/>
        <el-table-column label="起始地机构" prop="startAgencyName"/>
        <el-table-column label="目的地机构" prop="endAgencyName"/>
        <el-table-column label="运单数量" prop="transportOrderNumber"/>
        <el-table-column label="出车时间" prop="outStorageTime"/>
        <el-table-column label="回车时间" prop="intoStorageTime"/>
        <el-table-column label="车牌号码" prop="licensePlate"/>
        <el-table-column label="车辆是否可用">
          <template #default="{ row }">
            <span style="color: #42b983" v-if="row.isAvailable">可用</span>
            <span style="color: red" v-if="!row.isAvailable">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60px">
          <template #default>
            <el-button type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getCarListApi, TreeApi } from '@/api/register'
export default {
  name: 'RegisTer',
  data () {
    return {
      option: [
        {
          id: '',
          value: '全部'
        },
        {
          id: true,
          value: '可用'
        },
        {
          id: false,
          value: '不可用'
        }
      ],
      form: {
        page: 1,
        pageSize: 10,
        startAgencyId: '',
        endAgencyId: '',
        startAgencyName: '', // 起始机构名称
        endAgencyName: '', // 接受机构
        intoStorageStartTime: '', // 开始时间
        intoStorageEndTime: '', // 结束时间,
        isAvailable: null, // 状态
        transportTaskId: ''
      },
      tableData: [],
      treeList: [],
      cartime: '',
      defaultProps: {
        label: 'name'
      }
    }
  },
  created () {
    this.getCarList()
    this.getTreeList()
  },
  methods: {
    async getCarList () {
      const res = await getCarListApi(this.form)
      // console.log(res)
      this.tableData = res.data.items
    },
    // 搜索tree列表
    async getTreeList () {
      const res = await TreeApi()
      this.treeList = JSON.parse(res.data)
      // console.log(JSON.parse(res.data))
    },
    /// / 节点点击事件
    handleNodeClick (data) {
      // 配置树形组件点击节点后，设置选择器的值，配置组件的数据
      // console.log(data.name)
      this.form.startAgencyName = data.name
      this.form.startAgencyId = data.id
      // console.log(this.form.startAgencyName)
      // 选择器执行完成后，使其失去焦点隐藏下拉框效果
      this.$refs.formref.blur()
    },
    handleNodeClicktwo (data) {
      this.form.endAgencyName = data.name
      console.log(data.name)
      this.form.endAgencyId = data.id
      console.log(this.form.endAgencyId)
      this.$refs.cityref.blur()
    },
    timeSubmit () {
      // console.log(this.cartime[0])
      // console.log(this.cartime[1])
      this.form.intoStorageStartTime = this.time[0]
      this.form.intoStorageEndTime = this.time[1]
    },
    reset () {
      this.cartime = ''
      this.form = {
        page: 1,
        pageSize: 10,
        endAgencyId: '',
        startAgencyName: '', // 起始机构名称
        endAgencyName: '', // 接受机构
        intoStorageStartTime: '', // 开始时间
        intoStorageEndTime: '', // 结束时间,
        isAvailable: null, // 状态
        transportTaskId: ''
      }
      this.getCarList()
    }
  }
}
</script>

<style lang="scss" scoped>
.register {
  padding: 20px;
  background-color: #f3f4f7;
  padding-top: 23px;
  .card1 {
  margin-bottom: 20px;
  .el-card__body {
    padding-top: 20px;
    padding-left: 0;
    .el-row {
      margin: 0 !important;
      .el-col {
        padding-left: 30px;
        padding-right: 30px;
      }
      .el-button {
        width: 90px;
        padding: 10px 20px;
        border-radius: 5px;
      }
    }
    .el-form-item__label {
      color: #20232a;
      font-weight: 400;
      text-align: right;
      padding-left: 10px;
      box-sizing: border-box;
      white-space: nowrap;
    }
  }
}
}
.btn1{
      background-color: #E15536;
      color: #ffffff;
      height: 40px;
      width: 100px;
      border-radius: 5px;
      font-weight: 400;
}
.btn2{
      height: 40px;
      color: #2a2929;
      border: 1px solid #d8dde3;
      border-radius: 5px;
      font-weight: 400;
      width: 100px;
}
</style>
